<template>
  <a-row justify="center">
    <a-col :span="24">
      <a-card>
        <a-card-meta style="margin: 20px;" :title="$store.state.user.info.username + '相册'">
        </a-card-meta>
        <a-row>
          <a-col :span="6">
            <a-card>
              <a-upload-dragger
                v-model:fileList="fileList"
                name="file"
                :multiple="true"
                :action="$store.state.web.serverAddress+'/codes/oss/fileoss'"
                :before-upload="beforeUpload"
                :headers="auth"
                @change="handleChange"
                @drop="handleDrop"
              >
                <p class="ant-upload-drag-icon">
                  <inbox-outlined></inbox-outlined>
                </p>
                <p class="ant-upload-text">点击可以上传图片</p>
                <p class="ant-upload-hint">
                  支持拖拽上传，注意格式只能为png，jpg且大小不能超过2MB
                </p>
              </a-upload-dragger>
            </a-card>
          </a-col>
          <a-col :span="17" :offset="1">
            <a-table :dataSource="photos" :columns="columns">
              <template #bodyCell="{ column, text }">
                <template v-if="column.dataIndex === 'title'">
                  {{ text }}
                </template>
                <template v-if="column.dataIndex === 'url'">
                  <a-image :src="text" />
                </template>
                <template v-if="column.title === '操作'">
                  <a-popconfirm
                    title="你确定要删除该图片吗？"
                    ok-text="确认"
                    cancel-text="取消"
                    @confirm="deletePhoto(text.id)"
                  >
                    <a-button danger type="primary">删除</a-button>
                  </a-popconfirm>
                </template>
              </template>
            </a-table>
          </a-col>
        </a-row>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { message } from "ant-design-vue";
import { reactive, ref } from "@vue/reactivity";
import { useStore } from "vuex";
import albumApi from "@/apis/albumApi";
import { onMounted } from "@vue/runtime-core";
import { InboxOutlined } from "@ant-design/icons-vue";

const columns = [
  {
    title: "标题",
    dataIndex: "title",
    width: "25%",
  },
  {
    title: "图片",
    dataIndex: "url",
    width: "25%",
  },
  {
    title: "时间",
    dataIndex: "createTime",
    width: "25%",
  },
  {
    title: "操作",
    width: "25%",
  },
];
export default {
  name: "AlbumList",
  components: {
    InboxOutlined,
  },

  setup() {
    const store = useStore();
    const access = store.state.user.info.access;

    const fileList = ref([]);
    const loading = ref(false);

    const photos = ref([]);

    const photo = reactive({
      username: store.state.user.info.username,
      uid: store.state.user.info.id,
      title: "",
      url: "",
    });

    const auth = reactive({
      Authorization: "token:" + access,
    });

    const handleChange = (info) => {
      if (info.file.status !== "uploading") {
        loading.value = true;
      }
      if (info.file.status === "done") {
        loading.value = false;
        message.success(`${info.file.name} 上传成功`);
        savePhoto(info.file.response.data.url, info.file.name);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} 上传失败.`);
      }
    };

    const savePhoto = (url, title) => {
      photo.url = url;
      photo.title = title;
      albumApi.savePhoto(photo, access).then((resp) => {
        if (resp.code === 200) {
          getPhotos();
        }
      });
    };

    const beforeUpload = (file) => {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        message.error("照片只能是jpg和png!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        message.error("图片大小不能超过2MB!");
      }
      return isJpgOrPng && isLt2M;
    };

    onMounted(() => {
      getPhotos();
    });

    const getPhotos = () => {
      albumApi.getPhotos(access).then((resp) => {
        photos.value = resp.data.albums;
      });
    };

    const deletePhoto = (id) => {
      albumApi.deletePhoto(id, access).then((resp) => {
        if (resp.code === 200) getPhotos();
      });
    };

    return {
      fileList,
      auth,
      photos,
      columns,

      handleChange,
      beforeUpload,
      savePhoto,
      deletePhoto,
    };
  },
};
</script>

<style scoped>
div.title-sty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-style: initial;
  color: black;
}
</style>